<template>
  <div style="background-color: white; height: 100vh; overflow: hidden">
    <h2 class="title">消息中心</h2>
    <div class="tabs">
      <div
        :class="{ actline: active == 1 }"
        class="item-tab"
        @click="change(1)"
      >
        通知
        <el-badge class="mark" :value="12" is-dot />
      </div>

      <div
        :class="{ actline: active == 2 }"
        class="item-tab"
        @click="change(2)"
      >
        点赞
      </div>
      <div
        :class="{ actline: active == 4 }"
        class="item-tab"
        @click="change(4)"
      >
        评论
      </div>
      <div
        :class="{ actline: active == 3 }"
        class="item-tab"
        @click="change(3)"
      >
        收藏 <el-badge class="mark" :value="4" is-dot />
      </div>
    </div>
    <Notice v-show="active == 1" :messages="NoticeMessage"></Notice>
    <Fabulous v-show="active == 2" :messages="FabulousMessage"></Fabulous>
    <Collection v-show="active == 3" :messages="CollectionMessage"></Collection>
    <Comment v-show="active == 4" :messages="CommentMessage"></Comment>
  </div>
</template>

<script>
import Notice from "./PerComponent/Notice.vue";
import Fabulous from "./PerComponent/Fabulous.vue";
import Collection from "./PerComponent/Collection.vue";
import Comment from "./PerComponent/comment.vue";
import { PersonManager } from "../../request/personCenter.js";
console.log(PersonManager);

export default {
  components: {
    Notice: Notice,
    Fabulous: Fabulous,
    Collection: Collection,
    Comment: Comment,
  },
  data() {
    return {
      active: 1,
      messagequery: {
        type: 2,
        pageNum: 1,
        pageSize: 100,
      },
	  NoticeMessage: [],
	  FabulousMessage: [],
	  CollectionMessage: [],
	  CommentMessage: [],
    };
  },
  created() {
    this.getmessage();
  },
  methods: {
    //切换导航
    change(e) {
      this.active = e;
      this.messagequery.type = e;
      this.messagequery.pageNum = 1;
      this.messagequery.pageSize = 100;
    //   this.getmessage();

	const fakeMessage = [
		{
			"content": "",
			"createTime": "2021年12月8日",
			"fromUserId": 0,
			"fromUserImage": "",
			"fromUserName": "",
			"id": 0,
			"isRead": 0,
			"toUserId": 0,
			"toUserImage": "",
			"toUserName": "",
			"topicContent": "",
			"topicId": 0,
			"topicType": 0,
			"type": 0,
			"typeId": 0
		},
		{
			"content": "",
			"createTime": "",
			"fromUserId": 0,
			"fromUserImage": "",
			"fromUserName": "",
			"id": 0,
			"isRead": 0,
			"toUserId": 0,
			"toUserImage": "",
			"toUserName": "",
			"topicContent": "",
			"topicId": 0,
			"topicType": 0,
			"type": 0,
			"typeId": 0
		}
	]


    },
    getmessage() {
      PersonManager.getUserMessage(this.messagequery).then((res) => {
        console.log(res);
      });
    },
  },
};
</script>

<style scoped="scoped">
.item {
  margin-top: 10px;
  margin-right: 40px;
}
.content .title {
  margin: 20px 20px 10px;
}

.el-tabs__header {
  padding: 0;
  position: relative;
  margin: 0 0 15px;
}

.el-tabs__nav-wrap {
  overflow: hidden;
  margin-bottom: -1px;
  position: relative;
}

.title {
  margin: 20px 20px 10px;
}

.tabs {
  width: 100%;
  margin: 0 auto;
  height: 72px;
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  padding: 28px 30px;
  background-color: white;
}

.item-tab {
  width: 64px;
  height: 16px;
  margin-right: 1.875rem;
  font-size: 14px;
  font-weight: 400;
  color: #666;
  line-height: 16px;
  margin-right: 80 px;
  cursor: pointer;
  position: relative;
}
.actline {
  position: relative;
  font-weight: 600;
  color: rgb(3, 211, 189);
}

.actline::before {
  position: absolute;
  content: "";
  width: 25px;
  height: 2px;
  background: #03d3bd;
  position: absolute;
  left: 1px;
  top: 30px;
}

.attach-item {
  width: 100%;
  box-sizing: border-box;
  height: 40px;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 50px;
}

.attach-name {
  height: 16px;
  font-size: 16px;
  font-weight: 500;
  color: #333;
  line-height: 16px;
}

.download-attach {
  margin-left: 30px;
  width: 104px;
  height: 40px;
  background: #03d3bd;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 400;
  color: #fff;
  cursor: pointer;
}
</style>
